import { Route, Redirect, useLocation } from 'react-router-dom'
import { getToken } from '@/utils/storage'

export default function AuthRoute({ component: Component, children, ...rest }) {
  const location = useLocation()
  // console.log(location.pathname)
  return (
    <Route {...rest} render={() => {
      const token = getToken()
      if (token) {
        return children ? children : <Component></Component>
      } else {
        // 重定向
        // 首页 => 登录，记录首页的地址
        // 列表 => 登录，记录列表的地址
        return <Redirect to={{
          pathname: '/login',
          state: { from: location.pathname }
          // 传参方式：三种 search  query(不用)  state
          // search: '?username=zs&age=18',  // 显示在地址栏，需要自己拼接，将来还需自己解析
          // query: { username: 'ls', age: 19 },
          // state: { username: 'ww', age: 20 }
        }}></Redirect>
      }
    }}></Route>
  )
}

/* 
  路由 push/replace/redirect 传参的三种方式：
  1. search：显示在地址栏，刷新不丢失
  2. query：不显示在地址样款，刷新会丢失
  3. state：不显示在地址栏，刷新不丢失 (用的最多) => 这个state传参，只有 browserRouter 支持

  补充：利用动态路由传参：
   path='/user/:id'
   const { id } = useParams()
*/